<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-nav-bar
          title="会员注册"
          right-text="登录"
          left-arrow
          @click-left="onPageBackClick"
          @click-right="onRedirectLoginClick"/>

    <!-- 页面主体 -->
    <div class="content">
      <!-- 表单 -->
      <div class="form-container">
          <van-form @submit="onSubmit">
            <van-cell-group inset :border="false">
              <van-field required
                  v-model="formData.username"
                  name="username"
                  label="登录用户名"
                  placeholder="请输入登录用户名"
                  :rules="[{ required: true, message: '' }]"
              />
              <van-field required
                  v-model="formData.password"
                  type="password"
                  name="password"
                  label="登录密码"
                  placeholder="请输入登录密码"
                  :rules="[{ required: true, message: '' }]"
              />
              <van-field required
                  v-model="formData.familyName"
                  name="username"
                  label="姓"
                  placeholder="请输入姓"
                  :rules="[{ required: true, message: '' }]"
              />
              <van-field required
                  v-model="formData.givenName"
                  name="username"
                  label="名"
                  placeholder="请输入名"
                  :rules="[{ required: true, message: '' }]"
              />
              <van-field name="radio" label="性别" required>
                <template #input>
                  <van-radio-group v-model="formData.gender" direction="horizontal">
                    <van-radio :name="1">男</van-radio>
                    <van-radio :name="0">女</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <van-field required
                  v-model="formData.phoneNumber"
                  name="username"
                  label="手机号码"
                  placeholder="请输入手机号码"
                  :rules="[{ required: true, message: '' }]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button block round color="#7458b0" native-type="submit">
                注册
              </van-button>
            </div>
          </van-form>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <p>欢迎光临{{ hotelInfo.name }}</p>
      <p>预订热线：{{ hotelInfo.bookingNumber }}，投诉热线：{{ hotelInfo.feedbackNumber }}</p>
      <p>酒店地址：{{ hotelInfo.locationAddress }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotelInfo: {
        name: '',
        bookingNumber: '',
        feedbackNumber: '',
        locationIntro: '',
        locationAddress: ''
      },
      formData: {
        username: '',
        password: '',
        familyName: '',
        givenName: '',
        gender: 1,
        phoneNumber: ''
      }
    };
  },
  methods: {
    onPageBackClick() {
      this.$router.back();
    },
    onRedirectLoginClick() {
      this.$router.push('/login');
    },
    loadHotelInfo() {
      let hotelInfo = {
        name: '旺豪酒店北京王府井店',
        bookingNumber: '010-12345678',
        feedbackNumber: '010-87654321',
        locationIntro: '距离天安门广场约1.5公里，步行约25分钟',
        locationAddress: '北京市东城区王府井大街9527号'
      };

      this.hotelInfo = hotelInfo;
      localStorage.setItem('hotelInfo', JSON.stringify(hotelInfo));
    },
    onSubmit(values) {
      console.log('submit', values);
      // 这里可以添加登录逻辑，例如发送请求到后端
      alert('登录成功！用户名：' + values.username);
    }
  },
  mounted() {
    let hotelInfoString = localStorage.getItem('hotelInfo');
    if (hotelInfoString) {
      this.hotelInfo = JSON.parse(hotelInfoString);
    } else {
      this.loadHotelInfo();
    }
  }
};
</script>

<style scoped>
.container { max-width: 400px; height: 100vh; }

.footer { margin-top: 10px; padding-bottom: 20px; }
.footer p { margin: 0; text-align: center; font-size: 11px; color: #999; line-height: 20px; }

::v-deep .van-nav-bar .van-icon { color: #7458b0; }
::v-deep .van-nav-bar__text { color: #7458b0; }
::v-deep .van-radio__icon--checked .van-icon { background-color: #7458b0; border-color: #7458b0; }
</style>
